{
    function getSkillClass(skillLabel) {
        switch (skillLabel) {
            case "一般":
                return "skco4";
            case "良好":
                return "skco3";
            case "熟练":
                return "skco2";
            case "精通":
                return "skco1";
        }
    }

    // 定义初始化函数
    function initBasic() {
        let tab_basic = document.querySelector("#tab_basic");
        let imgSrc = "../images/resumePreview/man.png";
        let username = "王俊博";
        let userId = "386910008";
        let status = "目前正在找工作";
        let tel = 13359889498;
        let email = "13359889498@163.com";
        let gender = "男";
        let age = 23;
        let birth = "1996/03/22";
        let nowLoc = "现居住牡丹江";
        let exp = "2年工作经验";
        tab_basic.innerHTML += `<tr>
                    <td class="hbox" align="middle">
                        <img src="${imgSrc}" width="85" height="104" class="head" alt="头像">
                    </td>
                    <td>
                        <table cellspacing="0" cellpadding="0" border="0" class="infr">
                            <tr>
                                <td colspan="2" class="name">${username}</td>
                                <td align="right" class="icard">ID:${userId}</td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <img class="vam" src="../images/resumePreview/flag.png" width="20" height="20"/>${status}
                                </td>
                                <td valign="top">
                                    <img class="vam" src="../images/resumePreview/tel.png" width="20" height="20"/>${tel}
                                </td>
                                <td valign="top">
                                    <table cellspacing="0" cellpadding="0" border="0" class="email">
                                        <tr>
                                            <td valign="top" width="25">
                                                <img class="vam" src="../images/resumePreview/email.png" width="20" height="20"/>
                                            </td>
                                            <td valign="top" class="txt4">${email}
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" colspan="3">
                                    <p>
                                        <img class="vam" src="../images/resumePreview/basic.png" width="20" height="20"/>${gender}<span
                                            class="p5">|</span>${age} 岁
                                        (${birth})<span class="p5">|</span>${nowLoc}<span class="p5">|</span>${exp}
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>`;
    }

    function initCareer() {
        let output = ` <tr><td class="plate1">求职意向</td></tr>`;
        let tab_career = document.querySelector("#tab_career");
        let salary = "8000-9999";
        let loc = "苏州";
        let pos = ["Web前端开发", "Java开发工程师", "前端开发工程师"];
        let trade = ["互联网/电子商务", "计算机软件"];
        let toJobTime = "3个月内";
        let jobType = "全职";
        let selfEva = "学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程";
        output += `<tr><td class="tba">
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td class="tb2" valign="top">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="keys">期望薪资：</td>
                                            <td valign="top" class="txt2">
                                                ${salary} 元/月
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="tb2" valign="top">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="keys">地点：</td>
                                            <td valign="top" class="txt2">
                                                <span class="tag">${loc}</span>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="tb2" valign="top">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="keys">职能/职位：</td>
                                            <td valign="top" class="txt2">`;
        for (let i of pos) {
            output += `<span class="tag">&nbsp;${i}&nbsp;</span>`;
        }
        output += `</td></tr></table></td>
                                <td class="tb2" valign="top">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="keys">行业：</td>
                                            <td valign="top" class="txt2">`;
        for (let j of trade) {
            output += ` <span class="tag">&nbsp;互联网/电子商务&nbsp; </span>`;
        }
        output += `</td></tr></table></td></tr><tr>
                                <td class="tb2" valign="top">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="keys">到岗时间：</td>
                                            <td valign="top" class="txt2">${toJobTime}</td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="tb2" valign="top">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="keys">工作类型：</td>
                                            <td valign="top" class="txt2">${jobType}</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="tb1" colspan="2">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <thead style="height:0">
                                        <tr>
                                            <td valign="top" class="keys"></td>
                                            <td valign="top" class="txt1"></td>
                                        </tr>
                                        </thead>
                                        <tr>
                                            <td valign="top" class="keys">自我评价：</td>
                                            <td valign="top" class="txt1">${selfEva}</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>`;
        tab_career.innerHTML += output;
    }

    function initWork() {
        let output = `<tr><td class="plate1">工作经验</td></tr>`;
        let tab_work = document.querySelector("#tab_work");
        // 循环遍历工作经验并渲染
        for (let i = 0; i < 2; i++) {
            let timerThrough = "2018/7-2019/6";
            let jobName = "包装设计专员" + i + i + i + i + i + i + i + i;
            let dept = "研发中心";
            let comp = "山东凤祥股份有限公司";
            let workMonth = 11;
            let industry = "快速消费品(食品、饮料、化妆品)";
            let scale = "10000人以上";
            let compType = "民营公司";
            let desc = "主要负责包装版面的设计、包装尺寸及材质的确认";
            output += `<tr>
                    <td class="tbb">
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td class="p15">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="time">${timerThrough}</td>
                                            <td valign="top" class="rtbox">
                                                <strong class="txt3">${jobName}</strong><span
                                                    class="p5">|</span><span>${dept}</span></td>
                                        </tr>
                                        <tr>
                                            <td class="phd tb1" colspan="2">
                                                <span>${comp}</span><span class="gray">&nbsp;[${workMonth}个月]</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="phd tb1 gray2" colspan="2">
                                                ${industry}<span class="p5">|</span>${scale}<span
                                                    class="p5">|</span>${compType}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="tb1" colspan="2">
                                                <table cellspacing="0" cellpadding="0" border="0">
                                                    <tr>
                                                        <td valign="top" class="keys">工作描述：</td>
                                                        <td valign="top" class="txt1">${desc}</td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>`;
        }
        tab_work.innerHTML += output;
    }

    function initProject() {
        let output = `<tr><td class="plate1">项目经验</td></tr>`;
        let tab_project = document.querySelector("#tab_project");
        for (let i = 0; i < 2; i++) {
            let timerThrough = "2014/1-2015/6";
            let proName = "项目名称" + i;
            let comp = "山东凤祥股份有限公司";
            let desc = "项目描述，项目描述，项目描述，项目描述，项目描述，项目描述，";
            output += `<tr><td class="tba"><table cellspacing="0" cellpadding="0" border="0">
                       <tr><td class="p15"><table cellspacing="0" cellpadding="0" border="0">
                           <tr>
                                            <td valign="top" class="time">${timerThrough}</td>
                                            <td valign="top" class="rtbox">
                                                <strong>${proName}</strong>
                                            </td>
                                        </tr>
                           <tr>
                                            <td class="tb1" colspan="2">
                                                <table cellspacing="0" cellpadding="0" border="0">
                                                    <tr>
                                                        <td valign="top" class="keys">所属公司：</td>
                                                        <td valign="top" class="txt1">${comp}</td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                           <tr>
                                            <td class="tb1" colspan="2">
                                                <table cellspacing="0" cellpadding="0" border="0">
                                                    <tr>
                                                        <td valign="top" class="keys">项目描述：</td>
                                                        <td valign="top" class="txt1">${desc}</td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                       </table></td></tr></table></td></tr>`;
        }

        tab_project.innerHTML += output;
    }

    function initEducation() {
        let output = `<tr><td class="plate1">教育经历</td></tr>`;
        let tab_education = document.querySelector("#tab_education");
        for (let i = 0; i < 2; i++) {
            let timerThrough = "2014/1-2015/6";
            let eduPlace = "东北农业大学" + i;
            let eduLevel = "本科";
            let eduCourse = "会计学";
            output += `<tr><td class="tba">
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td class="p15">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="time">${timerThrough}</td>
                                            <td valign="top" class="rtbox"><strong>${eduPlace}</strong></td>
                                        </tr>
                                        <tr>
                                            <td class="tb1" colspan="2">${eduLevel}<span class="p5">|</span>${eduCourse}</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td></tr>`;
        }
        tab_education.innerHTML += output;
    }

    function initSkill() {
        let output = `<tr><td class="plate1">专业技能</td></tr>`;
        let tab_skills = document.querySelector("#tab_skills");
        for (let i = 0; i < 5; i++) {
            let skillName = "Illustrator";
            let skillLabel = "熟练";
            let skillClass = getSkillClass(skillLabel);
            output += `<tr><td class="p15 cell">
                           <table cellspacing="0" cellpadding="0" border="0">
                               <tr>
                                   <td class="skill">
                                       <strong class="txt5">${skillName}</strong>
                                   </td>
                                   <td valign="middle">
                                       <span class="skbg">
                                           <span class="skco ${skillClass}">${skillLabel}</span>
                                       </span>
                                   </td>
                               </tr>
                           </table>
                       </td></tr>`;
        }
        tab_skills.innerHTML += output;
    }

    function initSchoolHonor() {
        let output = `<tr><td class="plate1">校内荣誉</td></tr>`;
        let tab_schoolHonor = document.querySelector("#tab_schoolHonor");
        for (let i = 0; i < 2; i++) {
            let honorTime = "2011/7";
            let honorContent = "退堂鼓表演艺术家" + i;
            let honorLevel = "省级";
            output += `<tr><td class="tba"><table cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td valign="top" class="time">${honorTime}</td>
                                <td valign="top" class="rtbox">
                                    <strong class="txt3">${honorContent}</strong>
                                    <span>（${honorLevel}）</span>
                                </td>
                            </tr>
                        </table></td></tr>`;
        }
        tab_schoolHonor.innerHTML += output;
    }

    function initDescription() {
        let output = `<tr><td class="plate1">自我描述</td></tr>`;
        let tab_description = document.querySelector("#tab_description");
        let topic = "职业描述";
        let topicContent = "职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述";
        output += `<tr><td class="tb1">
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tr><td class="tba">
                                    <table cellspacing="0" cellpadding="0" border="0">
                                        <tr>
                                            <td valign="top" class="keys">主题：</td>
                                            <td valign="top" class="txt1">${topic}</td>
                                        </tr>
                                        <tr>
                                            <td valign="top" class="keys">主题描述：</td>
                                            <td valign="top" class="txt1">
                                            ${topicContent}
                                            </td>
                                        </tr>
                                    </table>
                                </td></tr>
                        </table>
                    </td></tr>`;
        tab_description.innerHTML += output;
    }

    // 运行初始化函数
    initBasic();
    initCareer();
    initWork();
    initProject();
    initEducation();
    initSkill();
    initSchoolHonor();
    initDescription();
}




